<template>
	<view class="">
		<view class="flex">
			<view class="select br8" @click="showCity = true">
				<view class="flex" v-if="address">
					<view class="fs24 c3 mr10">{{address}}</view>
					<u-icon @click.native.stop='carCity' name="close" color="#949494" size="12"></u-icon>
				</view>
				<view class="flex" v-else>
					<view class="fs24 c3 mr10">{{title}}</view>
					<u-icon name="arrow-down" color="#666" size="14"></u-icon>
				</view>
			</view>
		</view>

		<!-- 选择地址弹窗 -->
		<view class="">
			<region @chechCity="chechCity" @close="showCity = false" :show="showCity" confirmColor='#09C567'></region>
		</view>
	</view>
</template>

<script>
	import region from '@/components/city/region.vue';
	export default {
		props: {
			title: {
				default: '请选择区域'
			}
		},
		components: {
			region
		},
		data() {
			return {
				address: '', //选择的地址
				showCity: false, //选择地址弹窗
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			chechCity(e) { //确定选择地址
				console.log(e, 88)
				this.address = e.city
				this.$emit('selectAddress', e)
				this.showCity = false
			},
			carCity() { //删除地址
				this.address = ''
				this.$emit('carCity')
			}
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.select {
		padding: 2upx 12upx;
		background-color: #F1F2F4;
	}
</style>
